<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Canvas ARC</title>
<style>
	body {
		margin: 0px;
		padding: 0px;
	}
	
	canvas{
		background: red;
	}
</style>
</head>
<body>

<canvas id="myCanvas" width="578" height="250"></canvas>
<canvas id="myCanvas_1" width="578" height="250"></canvas>

<script>
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');
	
	context.beginPath();
	context.moveTo(100, 20);
	
	context.lineTo(200, 160);
	
	context.quadraticCurveTo(240, 200, 300, 120);
	
	context.bezierCurveTo(200, -40, 300, 200, 400, 150);
	
	context.lineTo(500, 90);
	
	context.lineWidth = 5;
	context.strokeStyle = 'blue';
	context.stroke();
	
	
	var canvas_1 = document.getElementById('myCanvas_1');
	var context_1 = canvas_1.getContext('2d');
	
	context_1.moveTo(120, 10);
	
	context_1.lineTo(90, 180);
	
	context_1.bezierCurveTo(70, 260, 40, 160, 100, 210);
	context_1.bezierCurveTo(170, 250, 220, 100, 80, 80);
	context_1.lineTo(200, 100);
	context_1.bezierCurveTo(180, 350, 250, 150, 250, 140);
	context_1.bezierCurveTo(250, 320, 300, 150, 300, 140);
	context_1.bezierCurveTo(280, 310, 400, 150, 330, 120);
	context_1.lineTo(500, 100);
	
	context_1.lineWidth = 5;
	context_1.strokeStyle = 'blue';
	context_1.stroke();
	
</script>

</body>
</html>